<template>
  <div class="max-w-7xl mx-auto lg:space-y-[1.875rem] max-lg:space-y-[1rem] pt-8 pb-4 max-lg:pb-[3rem]">
    <!-- footer -->
    <div class="max-lg:px-4 flex flex-col gap-4">
      <template v-if="initData?.pay_type">
        <div class="max-lg:flex hidden justify-between items-center">
          <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
            {{ $t('bottomCommon.payTypeText') }}
          </h2>
          <nuxt-link :to="localePath('/pay-type')" class="py-2 px-4 bg-[#fff] rounded-full border flex justify-center items-center cursor-pointer">
            <span class="font-bold text-[12px] text-[#71717A] capitalize"> {{ $t('pages.viewAll') }}</span>
          </nuxt-link>
        </div>
        <div class="flex gap-4 items-center w-full">
          <div class="flex overflow-y-auto gap-4 items-center">
            <div
              class="border p-2 group lg:h-[2rem] h-[2rem] flex justify-center items-center aspect-[4.5/2] w-full bg-[#FFFFFF] rounded-[.3rem] border-[.0625remx] border-solid border-[#F4F4F5]"
              v-for="(i, k) in initData?.pay_type"
              :key="k"
            >
              <img
                loading="lazy"
                class="object-contain h-full cursor-pointer"
                :src="$globalFn.imgPrefixUrl(i.icon)"
                alt="Payment method icon"
                title="Available payment option"
              />
            </div>
          </div>
          <nuxt-link
            v-if="initData?.pay_type?.length"
            :to="localePath('/pay-type')"
            class="lg:size-[2.75rem] lg:flex bg-[#FAFAFA] rounded-[0.63rem] cursor-pointer hidden justify-center flex items-center flex-none"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6 font-bold text-[#A1A1AA]"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
          </nuxt-link>
        </div>
      </template>
      <!-- pc  footer 导航 -->
      <div class="lg:grid hidden grid-cols-4">
        <!-- 关于Sealmg -->
        <div class="flex flex-col col-span-1 gap-3" v-for="(item, index) in footer.footer_link" :key="index">
          <h2 class="text-[0.88rem] text-[#3F3F46] font-bold capitalize">
            {{ item.title || '' }}
          </h2>
          <nuxt-link v-for="(item1, index1) in item.list" :key="index1" :to="localePath(item1.link)">
            <div
              class="text-[0.75rem] active:scale-95 inline-block duration-300 text-[#71717A] font-medium hover:underline hover:underline-offset-4 cursor-pointer"
            >
              <span class="capitalize">
                {{ item1.title }}
              </span>
            </div>
          </nuxt-link>
        </div>
        <div class="flex flex-col col-span-1 gap-3">
          <!-- w-[7.5rem] -->
          <h2 class="text-[0.88rem] text-[#3F3F46] font-bold capitalize">
            {{ $t('pages.followUs') }}
          </h2>
          <LazyH5share type="2"></LazyH5share>
          <div class="">
            <img
              src="https://cd.sealmg.com/assets/img/logo-img2.png"
              class="object-cover h-[2.06rem] rounded-md border"
              loading="lazy"
              title="SEALMG Brand"
              alt="SEALMG Logo"
            />
          </div>
          <div class="font-medium text-[0.75rem] text-[#71717A] capitalize" v-if="footer.corporate_name">
            {{ footer.corporate_name || '' }}
          </div>
          <div class="font-medium text-[0.75rem] text-[#71717A] capitalize" v-if="footer.address">
            {{ footer.address || '' }}
          </div>
          <div class="font-medium text-[0.75rem] text-[#71717A] capitalize" v-if="footer.copyright">
            {{ footer.copyright || '' }}
          </div>
        </div>
      </div>
      <!-- 移动端footer 导航 -->
      <div class="max-lg:flex hidden flex-col gap-4">
        <!-- <div
          class="lg:grid-cols-5 lg:divide-x grid grid-cols-3 gap-2"
          v-if="footer.footer_link"
        >
          <NuxtLink
            :prefetch="false"
            class="text-[0.75rem] active:scale-95 duration-300 flex place-content-center text-[#71717A] hover:underline hover:underline-offset-4 cursor-pointer"
            v-for="(i, k) in [
              ...footer?.footer_link[0]?.list,
              ...footer?.footer_link[1]?.list,
              ...footer?.footer_link[2]?.list,
            ]"
            :key="k"
            :to="goPathDetail(i)"
          >
            <span class="line-clamp-1 px-1 text-center capitalize">
              {{ i.title }}
            </span>
          </NuxtLink>
        </div> -->
        <div class="flex flex-col gap-6">
          <div class="" v-for="(item, index) in footer.footer_link" :key="index">
            <div class="flex justify-between items-center cursor-pointer" @click="switchSubMenu(item)">
              <div class="font-medium text-[0.69rem] text-[#141414]">
                {{ item.title || '' }}
              </div>
              <i
                class="el-icon-arrow-right text-[0.88rem] text-[#141414] transition-transform duration-300"
                :class="{ 'rotate-90': item.isOpen }"
              ></i>
            </div>
            <div
              class="grid transition-all duration-300 ease-in-out"
              :class="[item.isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']"
            >
              <div class="overflow-hidden">
                <div class="flex gap-4 mt-4">
                  <nuxt-link class="" v-for="(item1, index1) in item.list" :key="index1" :to="localePath(item1.link)">
                    <div class="font-normal text-[0.69rem] text-[#999999]">
                      {{ item1.title }}
                    </div>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="font-medium text-[.8em] text-[#71717A] text-center capitalize">{{ $t('pages.followUs') }}</div>
        <div class="flex w-full">
          <div class="bg-[#fff] rounded-[0.5rem] px-8 py-2 w-full">
            <LazyH5share type="4"></LazyH5share>
          </div>
        </div>
        <div class="font-medium text-[0.75rem] text-[#71717A] text-center capitalize" v-if="footer.corporate_name">
          {{ footer.corporate_name || '' }}
        </div>
        <div class="font-medium text-[0.75rem] text-[#71717A] text-center capitalize" v-if="footer.address">
          {{ footer.address || '' }}
        </div>
        <div class="font-medium text-[0.75rem] text-[#71717A] text-center capitalize">
          {{ footer.copyright || '' }}
        </div>
      </div>
      <div class="max-lg:flex hidden flex-col gap-4">
        <div class=""></div>
        <div class=""></div>
      </div>
      <div class=""></div>
    </div>
    <!-- <div class="flex flex-col bg-[#F9F9FA] max-lg:h-[3rem] lg:visible"></div> -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: {}
      }
    },
    computed: {
      footer() {
        return this.$store.state.initData.footer || {}
      },
      routePath() {
        return this.$route.path
      },
      initData() {
        return this.$store.state.initData.initData || {}
      },
      userInfo() {
        return this.$store.state.user.userInfo || {}
      }
    },
    methods: {
      switchSubMenu(item) {
        const updatedFooter = {
          ...this.footer,
          footer_link: this.footer.footer_link.map(i => ({
            ...i,
            isOpen: i.title === item.title ? !i.isOpen : false
          }))
        }
        this.$store.commit('initData/setFooter', updatedFooter)
      }
    }
  }
</script>
<style lang="less" scoped></style>
